<template>
  <!-- 协议 -->
  <view class="agreement-box">
    <NavBar :title="title" leftArrow @click-left="navBack()" />

    <view class="word-wrap">
      <view id="wordView" v-html="wordText" />
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue';
import { navBack } from '@/utils/utils.js';
import mammoth from 'mammoth';

export default {
  data() {
    return {
      navBack,
      wordText: '',
      title: '',
      wordURL: [
        `../../static/word/software_licensing.docx`, //畅了软件许可及服务协议
        `../../static/word/privacy_protection.docx`, //畅了隐私保护指引
        `../../static/word/protocol_of_usage.docx`, //畅了个人账号使用规范
        `../../static/word/childrens_privacy.docx`, //儿童隐私保护声明
        `../../static/word/service_agreement.docx` //服务协议
      ]
    };
  },
  components: { NavBar },
  onLoad(options) {
    const id = Number(options.id);
    this.title =
      id === 0
        ? '畅了软件许可及服务协议'
        : id === 1
        ? '畅了隐私保护指引'
        : id == 2
        ? '畅了个人账号使用规范'
        : id === 3
        ? '儿童隐私保护声明'
        : '服务协议';

    id < this.wordURL.length
      ? this.firstApi(id)
      : uni.showToast({
          title: '访问异常，请重新尝试',
          icon: 'none'
        });
  },
  methods: {
    firstApi(id) {
      uni.showToast({
        title: '加载中...',
        icon: 'loading',
        duration: 999999
      });
      const xhr = new XMLHttpRequest();
      xhr.open('get', this.wordURL[id], true);
      xhr.responseType = 'arraybuffer';
      xhr.onload = () => {
        uni.hideToast();
        if (xhr.status == 200) {
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
            this.$nextTick(() => {
              this.wordText = resultObject.value;
            });
          });
        }
      };
      xhr.onerror = (err) => {
        uni.hideToast();
        uni.showToast({
          title: `${err}`,
          icon: 'none'
        });
      };
      xhr.send();
    }
  }
};
</script>

<style lang="scss" scoped>
.agreement-box {
  padding: calc(var(--amplified_base) * 120rpx) 20rpx 120rpx;
  text-indent: 2em;
  min-height: 100vh;
  background-color: #fff;
  font-size: calc(var(--amplified_base) * 28rpx);
}
</style>
